<script setup>
import Emoji from './Emoji/Index.vue'
import { ref } from 'vue';
const emits = defineEmits(["PictureToKey"])

function imgToKey (data) {
  emits("PictureToKey", data)
}

function emity () {

}

const emojiArray = ref([
  {
    defaultImg: '/src/assets/emoji/1f44b.png',
    data: [],
  },
  {
    defaultImg: '/src/assets/emoji/1f44b.png',
    data: [],
  },
]);

const index = ref(0)


function switchEmoji (i, e) {
  index.value = i;
}

</script>

<template>
  <div class="g-emoji__list" @click.stop="emity">
    <div class="g-emoji__center">
      <Emoji v-if="index === 0" @PictureToKey="imgToKey" />
    </div>
    <div class="g-emoji__list__footer">
      <div class="footer__left" v-if="false">l</div>
      <div class="footer__center">
        <div class="footer__item" v-for="item, index in emojiArray" @click="switchEmoji(index, $event)">
          <img :src="item.defaultImg" style="height: 32px;">
        </div>
      </div>
      <div class="footer__right" v-if="emojiArray.length > 9">r</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.g-emoji__list {
  user-select: none;
  position: absolute;
  // top: 0;
  left: 0;
  width: 500px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background-color: white;
  // overflow: hidden;
  box-shadow: 1px 1px 10px 1px #0001,
    -1px -1px 10px 1px #0001;

  &::before {
    content: "";
    border: 10px solid transparent;
    border-top-color: white;
    position: absolute;
    bottom: -18px;
    left: 50%;
    box-shadow: 1px 1px 10px 1px #eee;
    // transform: translateX(-50%);
  }

  .g-emoji__center {
    height: 400px;

  }

  &__footer {
    border-top: 1px solid #ccc;
    padding: 10px 16px;
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .footer__center {
    height: 100%;
    display: flex;
    flex: 1 1 0;
    padding: 6px 0;
    align-items: center;

    gap: 20px;
    overflow: hidden;
  }

  .footer__item {
    display: flex;
    align-items: center;
    padding: 2px 2px;

    &.is_open {
      background-color: #a8a8a8;
    }
  }

  .footer__left {
    width: 30px;
    height: 30px;
    background-color: red;
  }

  .footer__right {
    width: 30px;
    height: 30px;
    background-color: red;
  }
}
</style>

